<template>
  <a-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-align="right"
    :label-col-props="{ span: 6 }"
    :wrapper-col-props="{ span: 18 }"
    @submit="handleSubmit"
  >
    <a-form-item field="partnerId" label="运营商" required>
      <a-select
        v-model="form.partnerId"
        :placeholder="$t('请选择运营商')"
        :loading="partnerLoading"
        allow-clear
      >
        <a-option
          v-for="partner in partnerOptions"
          :key="partner.id"
          :value="partner.id"
          :label="partner.partnerName"
        >
          {{ partner.partnerName }}
        </a-option>
      </a-select>
    </a-form-item>
    <a-form-item field="amount" label="金额" required>
      <a-input-number
        v-model="form.amount"
        :placeholder="$t('请输入金额')"
        :precision="2"
        :min="0.01"
        :step="10"
        mode="button"
        hide-button
        :style="{ width: '100%' }"
      />
    </a-form-item>
    <a-form-item v-if="isConsume" field="sn" label="订单号">
      <a-input v-model="form.sn" :placeholder="$t('请输入订单号')" allow-clear />
    </a-form-item>
    <a-form-item field="remark" label="备注">
      <a-textarea
        v-model="form.remark"
        :placeholder="$t('请输入备注')"
        allow-clear
      />
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref, reactive, PropType, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { getPartnerList, Partner } from '@/api/partner';

const props = defineProps({
  isConsume: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['submit']);
const formRef = ref();
const partnerLoading = ref(false);
const partnerOptions = ref<Partner[]>([]);

const form = reactive({
  partnerId: undefined as number | undefined,
  amount: undefined as number | undefined,
  sn: '',
  remark: ''
});

const rules = {
  partnerId: [
    { required: true, message: '请选择运营商' }
  ],
  amount: [
    { required: true, message: '请输入金额' },
    { 
      validator: (value: number) => value > 0, 
      message: '金额必须大于0' 
    }
  ]
};

// 获取运营商列表
const fetchPartnerList = async () => {
  partnerLoading.value = true;
  try {
    const params = {
      status: 1, // 只查询启用状态的运营商
      size: 1000 // 查询足够多的记录以覆盖所有运营商
    };
    const res = await getPartnerList(params);
    partnerOptions.value = res.data.records;
  } catch (err) {
    console.error('获取运营商列表出错:', err);
    Message.error('获取运营商列表失败');
  } finally {
    partnerLoading.value = false;
  }
};

// 提交表单
const handleSubmit = async () => {
  const { validatedError } = await formRef.value.validate();
  if (validatedError) return;
  
  emit('submit', { ...form });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
};

// 填充表单数据
const fillFormData = (data: any) => {
  Object.keys(data).forEach(key => {
    if (Object.prototype.hasOwnProperty.call(form, key)) {
      form[key as keyof typeof form] = data[key];
    }
  });
};

onMounted(() => {
  fetchPartnerList();
});

// 向父组件暴露方法
defineExpose({
  resetForm,
  validate: async () => {
    try {
      await formRef.value.validate();
      return true;
    } catch (err) {
      return false;
    }
  },
  fillFormData,
  form // 暴露表单数据，以便父组件访问
});
</script> 